<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网传感器模拟系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">物联网传感器模拟系统</h1>
        
        <!-- 设备控制部分 -->
        <div class="row mb-5">
            <div class="col-md-4">
                <div class="sensor-card">
                    <h3>温度传感器</h3>
                    <div class="thermometer">
                        <div class="thermometer-body">
                            <div class="thermometer-scale">
                                <span>40°C</span>
                                <span>30°C</span>
                                <span>20°C</span>
                                <span>10°C</span>
                                <span>0°C</span>
                            </div>
                            <div class="thermometer-mercury" id="temperature-mercury"></div>
                        </div>
                    </div>
                    <input type="range" class="form-range" min="0" max="40" value="25" id="temperature-slider">
                    <div class="sensor-value" id="temperature-value">25°C</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="sensor-card">
                    <h3>湿度传感器</h3>
                    <div class="humidity-meter">
                        <div class="humidity-bar" id="humidity-bar"></div>
                        <div class="humidity-dots" id="humidity-dots"></div>
                    </div>
                    <input type="range" class="form-range" min="0" max="100" value="50" id="humidity-slider">
                    <div class="sensor-value text-center mt-2" id="humidity-value">50%</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="sensor-card">
                    <h3>水位传感器</h3>
                    <div class="water-level-container">
                        <div class="water-level-tank">
                            <div class="water-level" id="water-level"></div>
                        </div>
                    </div>
                    <input type="range" class="form-range" min="0" max="100" value="30" id="water-level-slider">
                    <div class="sensor-value" id="water-level-value">30%</div>
                </div>
            </div>
        </div>

        <!-- 数据趋势图表 -->
        <div class="chart-container mb-5">
            <h2 class="chart-title">传感器数据趋势</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="chart-wrapper">
                        <canvas id="temperature-chart"></canvas>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="chart-wrapper">
                        <canvas id="humidity-chart"></canvas>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="chart-wrapper">
                        <canvas id="water-level-chart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设备状态监控 -->
        <div class="device-status-container mb-5">
            <h2 class="device-title">设备状态监控</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="device-card">
                        <h3><i class="fas fa-snowflake"></i> 空调</h3>
                        <div class="device-status" id="ac-status">
                            <div class="status-indicator off"></div>
                            <span class="status-text">关闭</span>
                        </div>
                        <div class="device-info">
                            <p>温度设定: <span id="ac-temperature">25°C</span></p>
                            <p>模式: <span id="ac-mode">制冷</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="device-card">
                        <h3><i class="fas fa-tint-slash"></i> 除湿器</h3>
                        <div class="device-status" id="dehumidifier-status">
                            <div class="status-indicator off"></div>
                            <span class="status-text">关闭</span>
                        </div>
                        <div class="device-info">
                            <p>湿度设定: <span id="dehumidifier-target">45%</span></p>
                            <p>工作模式: <span id="dehumidifier-mode">自动</span></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="device-card">
                        <h3><i class="fas fa-faucet"></i> 水阀</h3>
                        <div class="device-status" id="valve-status">
                            <div class="status-indicator off"></div>
                            <span class="status-text">关闭</span>
                        </div>
                        <div class="device-info">
                            <p>开度: <span id="valve-opening">0%</span></p>
                            <p>流量: <span id="valve-flow">0 L/min</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 智能助手 -->
        <div class="chat-container mb-5">
            <h2 class="chat-title">智能环境助手</h2>
            <div class="chat-box" id="chat-box">
                <!-- 对话消息将在这里动态添加 -->
            </div>
            <div class="chat-input-container">
                <input type="text" id="chat-input" class="form-control" placeholder="请输入您的问题...">
                <button id="send-message" class="btn btn-primary">
                    <i class="fas fa-paper-plane"></i> 发送
                </button>
                <div class="loading-indicator" id="loading-indicator" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <span class="loading-text">正在处理您的请求...</span>
                </div>
            </div>
        </div>
    </div>

    <style>
        .sensor-card, .device-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .chart-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .chat-container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .chat-box {
            height: 400px;
            overflow-y: auto;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            max-width: 80%;
        }

        .user-message {
            background-color: #e3f2fd;
            margin-left: auto;
        }

        .assistant-message {
            background-color: #f5f5f5;
            margin-right: auto;
        }

        .chat-input-container {
            display: flex;
            gap: 10px;
        }

        .chat-input-container input {
            flex: 1;
        }

        .sending {
            opacity: 0.5;
            pointer-events: none;
        }

        .humidity-meter {
            width: 100%;
            height: 30px;
            background: #f0f0f0;
            border-radius: 15px;
            overflow: hidden;
            margin: 20px 0;
            position: relative;
        }

        .humidity-bar {
            height: 100%;
            width: 0%;
            background: #2196F3;
            transition: width 0.3s ease;
        }

        .humidity-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 5px;
        }

        .humidity-dot {
            width: 6px;
            height: 6px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin-top: 12px;
        }
    </style>

    <script>
        // 聊天功能
        const chatBox = document.getElementById('chat-box');
        const chatInput = document.getElementById('chat-input');
        const sendButton = document.getElementById('send-message');
        const loadingIndicator = document.getElementById('loading-indicator');
        
        // 配置 marked 选项
        marked.setOptions({
            breaks: true,  // 支持换行
            gfm: true,     // 支持 GitHub Flavored Markdown
            sanitize: true // 使用 DOMPurify 进行 XSS 防护
        });
        
        function addMessage(content, isUser) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'assistant-message'}`;
            
            if (isUser) {
                messageDiv.textContent = content;
            } else {
                // 使用 marked 渲染 Markdown
                const sanitizedContent = DOMPurify.sanitize(marked.parse(content));
                messageDiv.innerHTML = sanitizedContent;
            }
            
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }
        
        function setSendingState(isSending) {
            chatInput.disabled = isSending;
            sendButton.disabled = isSending;
            loadingIndicator.style.display = isSending ? 'flex' : 'none';
        }
        
        function sendMessage() {
            const message = chatInput.value.trim();
            if (!message) return;
            
            // 添加用户消息
            addMessage(message, true);
            chatInput.value = '';
            
            // 设置发送状态
            setSendingState(true);
            
            // 发送到后端
            fetch('/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    query: message
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    addMessage(data.response, false);
                } else {
                    addMessage('抱歉，处理您的请求时出现错误。', false);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                addMessage('抱歉，处理您的请求时出现错误。', false);
            })
            .finally(() => {
                setSendingState(false);
            });
        }
        
        sendButton.addEventListener('click', sendMessage);
        chatInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>